<!-- 领取优惠券弹窗2 -->
<template>
	<view class="container">
		<u-popup v-model="show" 
			mode="center" 
			:mask-close-able="false" 
			border-radius="10" 
		>
			<view  class="popup-container">
				<view class="body">
					<view class="top">
						<view>恭喜您获得</view>
						<view v-if="coupontype=='CouponClass0'">1张优惠券</view>
						<view v-if="coupontype==='CouponClass3'">1张好友券</view>
					</view>
					
					<view class="center">
						<view v-if="coupontype===1" class="label">好友领取后获得</view>
						<view class="coupon">
							<view class="coupon-l">
								<view>满减券</view>
								<view>加注满{{doorMoney}}元可用</view>
								<view class="time">领取后的{{validityDays}}天内有效</view>
							</view>
							<view class="coupon-r">{{discountMoney}} <text>元</text></view>
						</view>
					</view>
					<view class="bottom">
						<button type="default" @tap="confirm">立即领取</button>
					</view>
				</view>
				<image v-if="show" @tap="close" class="icon-cha" src="/static/wxImage/icon-cha.png" mode="aspectFill"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:'get-coupon2',
		props: {
			coupontype: {
				type: String,
				default: 'CouponClass0' // CouponClass0 是普通优惠券 CouponClass3 是好友券
			},
			validityDays: {
				type: String,
				default: '30'
			},
			doorMoney: {
				type: String || Number,
				default: '0'
			},
			discountMoney: {
				type: String || Number,
				default: '0'
			}
		},
		data() {
			return {
				show:false,
				src:'',
				canTap: false
			}
		},
		mounted() {
			setTimeout(() => {
				this.canTap = true;
			},1500)
		},
		methods:{
			confirm() {
				this.$emit('confirm');
			},
			open() {
				this.show = true;
			},
			close() {
				if(this.canTap) {
					this.show = false;
				};
			},
			
		}
	}
</script>

<style lang="scss" scoped>

	
	.popup-container {
		height: 800rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.body {
		width: 570rpx;
		height: 664rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		flex-direction: column;
		border-radius: 10rpx;
		padding-bottom: 30rpx;
		
		.top {
			width: 100%;
			height: 304rpx;
			position: relative;
			background-image: url(../../static/wxImage/popup-bg.png);
			background-size: 570rpx 304rpx;
			background-repeat: no-repeat;
			padding: 50rpx 30rpx;
			
			>view:nth-child(1) {
				font-weight: bold;
				font-size: 50rpx;
				margin-bottom: 10rpx;
			}
			>view:nth-child(2) {
				font-weight: bold;
				font-size: 36rpx;
				color: #0CAB64;
			}
			
		}
		.label {
			color: #666666;
			text-align: center;
			padding-bottom: 20rpx;
		}
		.center {
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin: 30rpx 0;
			.coupon {
				display: flex;
				width: 530rpx;
				height: 166rpx;
				border-radius: 12rpx;
				padding: 0 40rpx;
				box-shadow: 0 2rpx 10rpx 0 rgba(197, 205, 202, 0.55);
				position: relative;
				
				.coupon-l {
					display: flex;
					flex-direction: column;
					justify-content: center;
					flex: 1;
					overflow: hidden;
					line-height: 1.6;
					
					>view:nth-child(1) {
						font-size: 32rpx;
						font-weight: bold;
					}
					>view:nth-child(2) {
						font-size: 28rpx;
						font-weight: 600;
					}
					
					.time {
						font-size: 20rpx;
						color: #999999;
					}
				}
				.coupon-r {
					position: absolute;
					top: 36rpx;
					right: 30rpx;
					color: #0DC887;
					font-weight: bold;
					font-size: 72rpx;
					display: flex;
					align-items: flex-start;
					white-space: nowrap;
		
					text {
						font-size: 30rpx;
						transform: translateY(10rpx);
					}
				}
				
			}
		}
		.bottom {
			margin-top: 20rpx;
			
			>button {
				width: 530rpx;
				height: 90rpx;
				border-radius: 12rpx;
				color: #FFFFFF;
				font-size: 32rpx;
				line-height: 90rpx;
				background-color: #0DC887;
			}
		}
	}
	
	.icon-cha {
		margin-top: 50rpx;
		width: 75rpx;
		height: 75rpx;
		animation: fadeIn 1.5s ;
	}
	
	@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
</style>
